<template>
  <div class="mapPage">
    <div id="map" ></div>
    <!-- -->
  </div>
</template>

<script>
import { getLandDetailApi } from '@/api/agriLand'
export default {
  name: 'SevencolorUserIndex',

  data () {
    return {
      map: {},
      T: '',
      polygon: '',
      geoCenter: null,
      landList: []
    }
  },

  mounted () {
    this.getlandDetail()
  },

  methods: {
    async getlandDetail () {
      const params = {
        baseId: '',
        landId: ''
      }
      if (this.$route.query.baseId === undefined) {
        this.$message.error('未获取基地信息')
        this.load()
      } else if (this.$route.query.baseId !== undefined && this.$route.query.landId === undefined) {
        params.baseId = this.$route.query.baseId
        const res = await getLandDetailApi(params)
        console.log(res.data)
        this.landList = res.data
        this.load()
      } else if (this.$route.query.baseId !== undefined && this.$route.query.landId !== undefined) {
        params.baseId = this.$route.query.baseId
        params.landId = this.$route.query.landId
        const res = await getLandDetailApi(params)
        console.log(res.data)
        this.landList = res.data
        this.load()
      }
    },
    load () {
      const init = new Promise((resolve, reject) => {
        if (window.T) {
          console.log('地图初始化成功')
          resolve(window.T)
        }
      })
      init.then((T) => {
        this.T = T
        this.map = new T.Map('map')
        this.map.centerAndZoom(new T.LngLat(108.17871, 35.60372), 5)
        // console.log(this.map)
        // console.log(this.landList, 'landList')
        // console.log(this.T)
        // 合并所有经纬度调用setViewport在地图上显示所有圈地
        if (this.geoCenter === null && this.landList !== []) {
          let MapArray = []
          for (let i = 0; i < this.landList.length; i++) {
            const geoArray = JSON.parse(this.landList[i].geoInfo)
            MapArray = [...MapArray, ...geoArray]
          }
          this.map.setViewport(MapArray)
        } else if (this.landData !== []) {
          this.map.setViewport(this.landData)
        }

        // 双重for循环遍历所有的地块数据进行渲染
        for (let j = 0; j < this.landList.length; j++) {
          const geoObj = {}
          geoObj.geoInfo = JSON.parse(this.landList[j].geoInfo) // 经纬度
          geoObj.landName = this.landList[j].landName // 地块名称
          geoObj.landArea = this.landList[j].landArea // 地块名称

          const points = []
          for (let i = 0; i < geoObj.geoInfo.length; i++) {
            points.push(
              new T.LngLat(geoObj.geoInfo[i].lng, geoObj.geoInfo[i].lat)
            )
          }
          // 创建面对象
          this.polygon = new T.Polygon(points, {
            color: 'blue',
            weight: 3,
            opacity: 0.5,
            fillColor: '#FFFFFF',
            fillOpacity: 0.5,
            test: `<p>名称：${geoObj.landName}</p><p>面积：${geoObj.landArea}亩</p>`
          })

          // 向地图上添加面
          this.map.addOverLay(this.polygon)
        }
        // 地图图层
        const ctrl = new T.Control.MapType([

          {
            title: '卫星',
            icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
            layer: window.TMAP_HYBRID_MAP
          }
          // {
          //   title: '地图',
          //   icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', // 地图控件上所要显示的图层图标（默认图标大小80x80）
          //   layer: window.TMAP_NORMAL_MAP
          // }
        ])
        this.map.addControl(ctrl)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mapPage {
  width: 100vw;
  height: 100vh;
}
#map {
  width: 100vw;
  height: 100vh;
  z-index: 0;
}
</style>
